<template>
    <div>
        <el-row>
            <el-col :span="5">
                <div class="left-card-box" style="border-right:1px solid #eeeeee">
                    <el-form>
                        <el-form-item label="车位名：" class="full_width">
                            <el-input placeholder="请输入车位名" v-model="form.parkname"></el-input>
                        </el-form-item>
                        <el-form-item label="车位金额：" class="full_width">
                            <el-input placeholder="请输入车位金额" v-model="form.parkpay"></el-input>
                        </el-form-item>
                        <el-form-item label="车位类型：" class="full_width">
                            <el-select placeholder="请选择车位类型" clearable v-model="form.parktype" style="width: 100%">
                                <el-option v-for="item in typeList"
                                           :key="item.value"
                                           :label="item.text"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="车位状态：" class="full_width">
                            <el-select placeholder="请选择车位状态" clearable v-model="form.parkstatus" style="width: 100%">
                                <el-option v-for="item in statusList"
                                           :key="item.value"
                                           :label="item.text"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div class="underline"></div>
                    <div class="search-view-foot-submit">
                        <el-row>
                            <el-button type="primary" icon="el-icon-search" @click="search" class="button1">查询</el-button>
                            <el-button type="primary" icon="el-icon-edit" @click="reset" class="button2">重置</el-button>
                        </el-row>
                    </div>
                </div>
            </el-col>
            <el-col :span="19" style="background: #fff;">
                <div class="right-card-box">
                    <el-row>
                        <span class="list-title">车位列表</span>
                        <el-button type="success" icon="el-icon-plus" @click="add" style="float: right;width: 8%" v-show="this.type == '1'">新增</el-button>
                    </el-row>
                    <div class="list-view">
                        <div style="height:457px;overflow-y:auto;">
                            <el-table border :data="data" :stripe=true v-loading="loading"
                                      :header-cell-style="{'background':'#eef1f6','color':'#1f2d3d','border-color':'#dfe6ec'}"
                                      style="width: 100%;font-size: 14px;color: #1f2d3d" element-loading-text="拼命加载中">
                                <el-table-column type="index" label="序号" align="center" width="70"></el-table-column>
                                <el-table-column prop="parkname" width="200" sortable  show-overflow-tooltip label="车位名称" align="center"></el-table-column>
                                <el-table-column prop="parkpay" width="180" sortable show-overflow-tooltip label="车位金额" align="center"></el-table-column>
                                <el-table-column show-overflow-tooltip label="车位类型" align="center" v-if="this.type == '1'">
                                    <template slot-scope="scope">
                                        <el-tooltip :content="'park type: ' + scope.row.parktype" placement="top" >
                                            <el-switch
                                                    v-model="scope.row.parktype"
                                                    @change="handleShowStatusChangeHouse(scope.row)"
                                                    active-text="地下"
                                                    inactive-text="地上"
                                                    :active-value="1"
                                                    :inactive-value="2">
                                            </el-switch>
                                        </el-tooltip>
                                    </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip label="车位类型" align="center" v-else>
                                    <template slot-scope="scope">
                                        <el-tooltip :content="'park type: ' + scope.row.parktype" placement="top" >
                                            <el-switch
                                                    v-model="scope.row.parktype"
                                                    disabled
                                                    active-text="地下"
                                                    inactive-text="地上"
                                                    :active-value="1"
                                                    :inactive-value="2">
                                            </el-switch>
                                        </el-tooltip>
                                    </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip label="车位状态" align="center" v-if="this.type == '1'">
                                    <template slot-scope="scope">
                                        <el-tooltip :content="'park status: ' + scope.row.parkstatus" placement="top">
                                            <el-switch
                                                    v-model="scope.row.parkstatus"
                                                    @change="handleShowStatusChangeHouse(scope.row)"
                                                    active-text="已有车"
                                                    inactive-text="未有车"
                                                    :active-value="1"
                                                    :inactive-value="2">
                                            </el-switch>
                                        </el-tooltip>
                                    </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip label="车位状态" align="center" v-else>
                                    <template slot-scope="scope">
                                        <el-tooltip :content="'park status: ' + scope.row.parkstatus" placement="top">
                                            <el-switch
                                                    v-model="scope.row.parkstatus"
                                                    disabled
                                                    active-text="已有车"
                                                    inactive-text="未有车"
                                                    :active-value="1"
                                                    :inactive-value="2">
                                            </el-switch>
                                        </el-tooltip>
                                    </template>
                                </el-table-column>
                                <el-table-column width="280" label="操作" align="center" v-if="this.type == '1'">
                                    <template slot-scope="scope">
                                        <div style="display: flex;">
                                            <el-button :plain="true"
                                                       size="mini"
                                                       icon="el-icon-share"
                                                       :disabled="scope.row.parkstatus === 1? true : false"
                                                       style="background-color: #fff;font-size: 12px"
                                                       @click="share(scope.row, scope.$index)"
                                            >分配车位</el-button>
                                            <el-button :plain="true"
                                                       size="mini"
                                                       icon="el-icon-edit"
                                                       style="color: #62a8ea;background-color: #fff;font-size: 12px"
                                                       @click="edit(scope.row)"
                                            >编辑</el-button>
                                            <el-button :plain="true"
                                                       size="mini"
                                                       icon="el-icon-delete"
                                                       style="font-size: 12px;color: black;background-color: #fff"
                                                       @click="deleteData(scope.row, scope.$index)"
                                                       type="danger">移除
                                            </el-button>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="block">
                            <el-pagination @current-change="handleCurrentChange"
                                           layout="total, sizes,prev, pager, next, jumper"
                                           :current-page.sync="iPagination.current"
                                           :page-size='iPagination.pageSize'
                                           :page-sizes="iPagination.pageSizeOptions"
                                           :total="iPagination.total"
                                           @size-change="handleSizeChange">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <park-dialog ref="parkDialog"></park-dialog>
        <share-dialog ref="shareDialog"></share-dialog>
    </div>
</template>

<script>
    import parkDialog from './parkDialog'
    import shareDialog from './shareDialog'
    export default {
        name: "parkIndex",
        components:{
            shareDialog,
            parkDialog
        },
        data(){
            return{
                type: '',
                data: [],
                loading: false,
                iPagination: {
                    current: 1,
                    pageSize: 9,
                    pageSizeOptions: [5, 9, 20, 30],
                    total: 0,
                    // "page": 0,
                    // "pageSize": 9,
                },
                form:{
                    parkname: '',
                    parkpay: '',
                    parktype: '',
                    parkstatus: ''
                },
                typeList:[
                    {
                        value: 1,
                        text: '地下'
                    },
                    {
                        value: 2,
                        text: '地上'
                    }
                ],
                statusList:[
                    {
                        value: 1,
                        text: '已有车',
                    },
                    {
                        value: 2,
                        text: '未有车'
                    }
                ],
                dialogTableVisible: false,
                table: false,
            }
        },
        created(){
            this.$axiosToken({
                url: '/users/getUserByToken',
                method: 'get',
                data: {},
                success:(result=>{
                    this.type = result.type
                })
            });
            this.getParkData()
        },
        methods:{
            // 分页
            handleCurrentChange (val) {
                this.iPagination.current = val;
                this.getParkData()
            },
            handleSizeChange (val) {
                this.iPagination.current = 1;
                this.iPagination.pageSize = val;
                this.getParkData()
            },
            // reload (e) {
            //     this.conditions = Object.assign(this.conditions, e);
            //     this.iPagination.current = 1
            //     this.getParkData();
            // },
            // 获取列表
            getParkData(){
                this.loading = true;
                this.$Axios({
                    url: '/parking/getParkData',
                    method: 'get',
                    data:{
                        parkname: this.form.parkname,
                        parkpay: this.form.parkpay,
                        parktype: this.form.parktype,
                        parkstatus: this.form.parkstatus,
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.data = result.data;
                        this.iPagination.total = result.total;
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })
            },
            // 查询
            search(){
                this.iPagination.current = 1;
                this.getParkData()
            },
            // 重置
            reset(){
                this.form={
                    parkname: '',
                    parkpay: '',
                    parktype: '',
                    parkstatus: ''
                };
                this.search()
            },
            // 分配车位
            share(row, index){
                console.log(row,333);
                this.$refs.shareDialog.table = true;
                this.$refs.shareDialog.init(row)
            },

            // 新增
            add(){
                this.$refs.parkDialog.dialogTableVisible = true;
                this.$refs.parkDialog.actionType = 'add';
                this.$refs.parkDialog.formData = Object.assign({});
                this.$refs.parkDialog.formData.parkstatus = this.statusList[1].value
            },

            // 编辑
            edit(row){
                this.$refs.parkDialog.dialogTableVisible = true;
                this.$refs.parkDialog.actionType = 'edit';
                this.$refs.parkDialog.init(row)
            },
            // 改变状态
            handleShowStatusChangeHouse(row){
                this.$axiosToken({
                    url: '/parking/editParkData',
                    method: 'post',
                    data:{
                        u_id: row.id,
                        parkname: row.parkname,
                        parkpay: row.parkpay,
                        parktype: row.parktype,
                        parkstatus: row.parkstatus
                    },
                    success: (result)=>{
                        this.$message({
                            message: '更新状态成功',
                            type: 'success',
                            duration: 1000
                        });
                        this.getParkData()
                    }
                });
            },

            // 删除
            deleteData(row,index){
                this.$confirm('确定删除该车位？', '提示', {
                    type: 'warning',
                }).then(()=>{
                    const id = row.id;
                    this.$axiosToken({
                        url: '/parking/delParkData',
                        method: 'get',
                        data:{id},
                        success: (result) =>{
                            this.$message({
                                message: '删除车位成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.getParkData()
                        }
                    }).catch((reason)=>{
                        alert('删除失败'+reason)
                    })
                })
            }


        }
    }
</script>

<style scoped>
    .left-card-box {
        height: 550px;
        width: 100%;
        background: #fff;
    }
    .right-card-box {
        padding: 20px;
        height: 530px;
        background: #fff;
    }
    .list-title {
        display: inline-block;
        font-size: 1.5em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
    }
    .underline {
        border-bottom: 1px solid #E6E5E5;
        padding: 0 35px;
        margin-top: 15px;
    }
    .search-view-foot-submit {
        margin-top: 40px;
        text-align: center;
    }
    .list-view {
        margin: 15px 0 0 0;
    }
    .block{
        float: right;
        margin-top: 10px;
    }
    /deep/ .el-input.el-input--mini.el-input--suffix>.el-input__inner{
        height: 28px;
    }
    /deep/ .el-input__inner{
        font-size: 14px;
        height: 36px;
    }
    /deep/ .el-button--mini, .el-button--small{
        border-radius: 5px;
    }
    .full_width {
        width: 100%;
        margin: 32px 0 30px 0;
    }
    .button1,.button2{
        width: 45%;
        font-size: 14px;
    }
</style>